<template>
    <div  class="w-100 h-100" >
        <fakeLenfend
        :color="['#01F1E4','#0B5380']"
        :text="['其他','井内连线']"
        >
        </fakeLenfend>

        <div class="w-100 " style="height: 90%;">
            <div id="lngxlx" class="w-100 " style="height: 100%;position: relative">
        
         
</div>
        </div>
   
    </div>
    
</template>
    
<script setup lang='ts'>
const props=defineProps({
    glData:{
        type:Array,
        default:()=>[]
    },
    sumdata:{
        type:Array,
        default:()=>[]
    },
    sumdata1:{
        type:Array,
        default:()=>[]
    }
    
})
import * as echarts from 'echarts'
import fakeLenfend from '@/components/project/fakeLegend.vue'
// const data =props.sumdata;
// const data2 = props.sumdata1;
const colorArr2 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "rgba(11, 83, 128)"];
const colorArr = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "rgb(12, 109, 122)"];
const colorArr1 = ["rgb(140, 227, 49)", "rgba(105, 133, 76)", "rgb(140, 227, 49)"];
var color = {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
        {
            offset: 0,
            color: colorArr[0],
        },
        {
            offset: 0.5,
            color: colorArr[0],
        },
        {
            offset: 0.5,
            color: colorArr[1],
        },
        {
            offset: 1,
            color: colorArr[1],
        },
    ],
};
var color1 = {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
        {
            offset: 0,
            color: colorArr1[0],
        },
        {
            offset: 0.5,
            color: colorArr1[0],
        },
        {
            offset: 0.5,
            color: colorArr1[1],
        },
        {
            offset: 1,
            color: colorArr1[1],
        },
    ],
};
var color2 = {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
        {
            offset: 0,
            color: colorArr2[0],
        },
        {
            offset: 0.5,
            color: colorArr2[0],
        },
        {
            offset: 0.5,
            color: colorArr2[1],
        },
        {
            offset: 1,
            color: colorArr2[1],
        },
    ],
};
var barWidth = 30;
let option = {
   
    
    // backgroundColor: transparent,
    tooltip: {
        trigger: 'axis',
        formatter: function (params:any) {
            var str = params[0].name + ":";
            params.filter(function (item:any) {
                if (item.componentSubType == "bar") {
                    str += "<br/>" + item.seriesName + "：" + item.value;
                }
            });
            return str;
        },
    },
    //图表大小位置限制
    grid: {
        x: '15%',
        x2: '5%',
        y: '15%',
        y2: '15%',
    },
    xAxis: {
        data: props.glData.map((item:any) => item.name),
        //坐标轴
        axisLine: {
            show: true,
            lineStyle: {
                width: 1,
              
            },
            textStyle: {
                color: '#fff',
                fontSize: '10'
            }
        },
        type: 'category',
        axisLabel: {
            textStyle: {
              fontSize: 20,
              color: "#667A8E",

            }
        },
        axisTick: {
            textStyle: {
                color: '#fff',
                fontSize: '16'
            },
            show: false,
        },
    
    },
    yAxis: {
        show:true,
        nameTextStyle: {
            color: '#032332 ',
            fontSize: 12,
            padding: 10,
        },
        min: 0,//最小
        // max: 3500,//最大
        // interval: 500,//相差
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',//线的类型 虚线0
                opacity: 0.2//透明度
            },
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
        },
        //坐标值标注
        axisLabel: {
            show: true,
            fontSize: 20,
      fontFamily: "OPPOSans-Regular",
    //   rotate: 45, // 标签旋转角度
            interval: 'auto',
      formatter: function(value:any) {
                return value + ' 条'; // 在这里替换 '单位' 为你需要的单位
            }
        },
    },
    series: [
        //中
        {
            z: 1,
            name: '其他',
            type: "bar",
            barWidth: barWidth,
            barGap: "0%",
            data: props.sumdata,
            itemStyle: {
                normal: {
                    color: color,
                    //柱形图上方标题
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'rgb(1, 255, 250)',
                            fontSize: 8
                        }
                    },
                }
            },
        },
        //下
        {
            z: 2,
            name: '其他',
            type: "pictorialBar",
            data: props.sumdata.map((item:any) => item + 200),
            symbol: "diamond",
            symbolOffset: ["-75%", "50%"],
            symbolSize: [barWidth, 10],
            itemStyle: {
                normal: {
                    color: color
                },
            },
            tooltip: {
                show: false,
            },
        },
        //上
        {
            z: 3,
            name: '其他',
            type: "pictorialBar",
            symbolPosition: "end",
            data: props.sumdata,
            symbol: "diamond",
            symbolOffset: ["-85%", "-60%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: colorArr[2]
                },
            },
            tooltip: {
                show: false,
            },
        },
        {
            z: 1,
            name: '井内连线',
            type: "bar",
            barWidth: barWidth,
            barGap: "50%",
            data: props.sumdata1,
            itemStyle: {
                normal: {
                    color: color2,
                    //柱形图上方标题
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'rgb(2, 157, 246)',
                            fontSize: 8
                        }
                    },
                }
            },
        },
        {
            z: 2,
            name: '井内连线',
            type: "pictorialBar",
            data: props.sumdata1.map((item:any) => item + 90),
            symbol: "diamond",
            symbolOffset: ["75%", "50%"],
            symbolSize: [barWidth, 10],
            itemStyle: {
                normal: {
                    color: color2
                },
            },
            tooltip: {
                show: false,
            },
        },
        {
            z: 3,
            name: '井内连线',
            type: "pictorialBar",
            symbolPosition: "end",
            data: props.sumdata1,
            symbol: "diamond",
            symbolOffset: ["75%", "-50%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: colorArr2[2]
                },
            },
            tooltip: {
                show: false,
            },
        },
        // {
        //     z: 1,
        //     name: '黄色',
        //     type: "bar",
        //     barWidth: barWidth,
        //     barGap: "50%",
        //     data: props.sumdata1,
        //     itemStyle: {
        //         normal: {
        //             color: color1,
        //             //柱形图上方标题
        //             label: {
        //                 show: true,
        //                 position: 'top',
        //                 textStyle: {
        //                     color: 'rgb(2, 157, 246)',
        //                     fontSize: 8
        //                 }
        //             },
        //         }
        //     },
        // },
        // {
        //     z: 2,
        //     name: '黄色',
        //     type: "pictorialBar",
        //     data: props.sumdata1.map(item => item + 90),
        //     symbol: "diamond",
        //     symbolOffset: ["75%", "50%"],
        //     symbolSize: [barWidth, 10],
        //     itemStyle: {
        //         normal: {
        //             color: color1
        //         },
        //     },
        //     tooltip: {
        //         show: false,
        //     },
        // },
        // {
        //     z: 3,
        //     name: '黄色',
        //     type: "pictorialBar",
        //     symbolPosition: "end",
        //     data: props.sumdata1,
        //     symbol: "diamond",
        //     symbolOffset: ["75%", "-50%"],
        //     symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        //     itemStyle: {
        //         normal: {
        //             borderWidth: 2,
        //             color: colorArr1[2]
        //         },
        //     },
        //     tooltip: {
        //         show: false,
        //     },
        // },
    ],
}
onMounted(() => {    
    let myChart = echarts.init(document.getElementById("lngxlx") as HTMLElement);
    myChart.setOption(option)
})

</script>
    
<style scoped lang="less">

</style>